回归基础: JavaScript的对象语法
前端大学,每天精选前端干货文章,帮您提升前端技术!
对象是JavaScript语言的基础。许多内置数据类型,如:错误、正则表达式和函数,在JavaScript中也表示为对象。所以想要成为一名优秀JavaScript工程师,就必须牢牢掌握对象的工作原理。本文将教你在JavaScript创建和使用对象的基础知识。
对象是又原型和其他对象创建的复合数据类型。一个对象创建的块通常被称为它的属性或是字段。属性被用来描绘对象的某些方面。例如,可以用一个属性来可以描绘一个列表的长度,一只狗的颜色或者某人的出生日期。
创建对象
在JavaScript中创建对象是非常简单的,JS为我们提供了 object literal notation(对象字面量的符号)的语法去快速创建一个对象。对象字面量的符号用大括号来表示。以下示例就是创建了一个没有属性的空对象。
`var object = {};`
在大括号里面,属性及其值被指定为一组键值。键可以是字符串或者标识符,值可以是任何有效的表达式。键和值中间用冒号分割,键值对间用逗号来分割。下面这个例子就是用字面量方式创建的具有三个属性的对象。第一个属性foo
是数字1,第二个属性bar
被定义成了字符串类型,并存储一个字符串值。第三个属性baz
存储了一个空对象。
var object = {
foo: 1,
"bar": "some string",
baz: {
}
};
注意上面例子使用的空格,每个属性被写在单独一行并缩进,可见在这种格式下代码更可读。尤其是在当有许多属性或者嵌套对象时。
访问属性
JavaScript提供了两个符号去访问对象的属性。首先,最常见的一种是点符号。在这种方式下,通过对象名后加属性名的方式去访问这个对象的属性。下面示例告诉我们如何用点符号去读写一个属性。如果object.foo
的值是1,那么执行这个语句后值为2。如果object.foo
没有一个值,那么它将变成 undefined
。
`object.foo = object.foo + 1;`
另一个访问对象属性的语法是括号符号。在这种方式下,对象名后跟一个方括号,方括号里面是字符串形式的属性名。下面的这个就是用括号符号的方式重写的上面点符号方式的例子。虽然代码看起来是不同,但是它们的功能是相同的。
`object["foo"] = object["foo"] + 1;`
括号法比点符号方法更强大,因为它可以允许一个变量去表示一个或者部分的属性名。这是由于在方括号内,JavaScript解释器能自动转换为一个字符串,并去检索其对应的属性。下面这个例子就是如何用括号法动态创建属性名。其中,属性名foo
就是由变量f
和字符串"oo"
拼接出来的。
var f = "f";
object[f + "oo"] = "bar";
括号字符方法也允许属性名包含在点符号方法中被禁止的字符。下面语句在括号字符的方法中是完全合法的,但如果在同样的点符号方法中,就会语法报错。
`object["!@#$%^&*()."] = true;`
访问嵌套属性
点字符方法或则括号字符方法都能访问嵌套属性。下面的这个例子,定义的对象就是包含者一个baz
嵌套对象,baz
对象又包含了一个foo
对象,foo
对象中又有一个bar
属性,值为5。
var object = {
baz: {
foo: {
bar: 5
}
}
};
接下来例子,我们来看一下如何访问嵌套属性的bar
。第一个方式我们用的是点字符方法。而第二种方法我们用的是括号字符法,第三种我们用两种方法组合的方式去访问。它们得到的都是同样的结果。
object.baz.foo.bar;
object["baz"]["foo"]["bar"];
object["baz"].foo["bar"];
如果每次都像之前这样去引用,可能会造成造成效率低下。如果同一个属性需要被使用数次。我们可以把它存在一个本地变量里为了以后去使用。下面的这个例子, bar
将在循环里被使用数次。为了避免反复去引用同一个值,我们把它存在一个本地变量中。
var bar = object.baz.foo.bar;
var count = 0;
for (var i = 0; i < 100000; i++) {
count += bar;
// better than count += object.baz.foo.bar;
}
--ADVERTISEMENT--
函数作为方法
当函数作为一个对象的属性时,它被叫做“方法”。类似与属性,方法也能用对象字面量的方法去创建。下面这个例子就是如何创建一个方法。
var object = {
sum: function(foo, bar) {
return foo + bar;
}
};
方法能用点或者括号的符号去执行。下面的这个例子展示了分别用点字符和括号字符方法去执行sum()
方法。
object.sum(1, 2);
object["sum"](1, 2);
增加属性和方法
对象字面量符号被用来创建一个新的对象。但是它不能增加已经存在的属性和方法。幸好,向对象添加新数据像创建赋值语句一样简单。下面这个例子创建了一个空的对象。然后用赋值语句增加了两个属性-foo
和bar
,和一个方法baz
。这是例子用了点字符的方法,括号字符的方法也是一样的。
var object = {};
object.foo = 1;
object.bar = null;
object.baz = function() {
return "hello from baz()";
};
总结
本文主要讲了JavaScript对象语法的基础部分。它对于你理解JavaScript对象是非常重要的,同时对象也是其实JavaScript其他语法的基础。千里之行始于足下,在JavaScript 的世界,在面向对象编程之前,你首先要理解对象。
原文链接:http://www.zcfy.cc/article/back-to-basics-javascript-object-syntax-4076.html?t=new
推荐阅读: